<template>
	<view class="login-container">
		<image src="../../static/img/login_bg.png" class="banner-bg" mode=""></image>
		<!-- 导航 -->
		<view class="login-nav">
			<view class="nav-item" @click="changFormType('account')" :class="{'active':type==='account'}">
				账号登录
			</view>
			<view class="nav-item" @click="changFormType('mobile')" :class="{'active':type !=='account'}">
				手机登录
			</view>
		</view>
		<!-- 表单部分 -->
		<uni-forms class="form" ref="form" :modelValue="formData" >
			<view class="" v-if="type ==='account'">
				<uni-forms-item label="账号" name="loginName">
				<uni-easyinput :inputBorder="false" clearSize="13" placeholder-class="placeholder" class="form-input" type="text" 
					placeholder="请输入账号" v-model="formData.loginName" ></uni-easyinput> 
				</uni-forms-item>
				<uni-forms-item label="密码" name="password">
					<uni-easyinput :inputBorder="false" placeholder-class="placeholder" 
					class="form-input" type="password" placeholder="请输入密码" v-model="formData.password" ></uni-easyinput> 
				</uni-forms-item>
			</view>
			<view class="" v-else>
				<uni-forms-item label="手机号" name="phone">
					<uni-easyinput :inputBorder="false" clearSize="13"  placeholder-class="placeholder" class="form-input" 
					type="number" placeholder="请输入手机号" v-model="formData.phone" ></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="验证码" name="vCode">
			<uni-easyinput :inputBorder="false" placeholder-class="placeholder" class="form-input" type="text" placeholder="请输入密码" v-model="formData.vCode" ></uni-easyinput> 
					<SendCode @getForm="getform" :form="$refs.form" class="code-component"></SendCode>
				</uni-forms-item>
			</view>
			
      <button class="login-btn" @click="_userLoginSubmit">立即登录</button>
		</uni-forms>
		<view class="footer-select-container">
			<text>注册</text>
			<text>忘记密码</text>
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		onReady() {
			this.$refs.form.setRules(this.formRules)
		},
		data() {
			return {
				type:'account',
				formData:{
					loginName:'',
					password:'',
					phone:"",
					vCode:'',
				},
				code:null//验证码暂时处理
			}
		},
		methods: {
			async _userLoginSubmit () {
				// 表单提交信息
				const res = await this.$refs.form.validate()
				// 提交信息
				const data = {...res,type:this.type}
				this._sendUserinfo(data)
			},
			/* 切换当前表单类型 */
			changFormType (type) {
				this.type = type;
				this.formData = {
					loginName:'',
					password:'',
					phone:"",
					vCode:'',
				}
				this.$refs.form.clearValidate([]) // 清空校验规则
			},
			async _sendUserinfo(data) {
				// 登录提交表单
				const userInfo = await this.$http.loging(data)
				if(userInfo) {
					this.updateUserInfo(userInfo)
					uni.showToast({
						title:'登录成功',
					})
					setTimeout(()=>{
					// #ifdef H5
						uni.switchTab({
						url: '/pages/index/index'
					})
					// #endif
					// #ifndef H5
						uni.navigateBack()
					// #endif
					},1500)
				}
			},
			async getform(_send) {
				//   因无法发送短信暂时处理
				this.code = _send && await _send(this.$refs.form)
				this.formData.vCode = this.code		
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	@import  './css/index.scss'
</style>
